<template>
    <form id="forgetPwd-form" class="forgetPwd-form">
        <group label-width="3.5em" label-align="left">
            <x-input :max='11' @on-blur="handleBlur" @on-focus="handleFocus" type="tel" title="手机" v-model="mobile.val" novalidate :icon-type="mobile.iconType" ref="mobile" name="mobile" placeholder="请输入手机号码" is-type="china-mobile" required></x-input>
        </group>
        
        <group label-width="3em" label-align="left">
            <x-input @on-blur="handleBlur" @on-focus="handleFocus" type="text" title="密码" v-model="password.val" novalidate :icon-type="password.iconType" ref="password" name="password" placeholder="请输入密码" :is-type="password.validPwd" required></x-input>
        </group>

        <group>
            <x-input  @on-blur="handleBlur" ref="verifyCode" name="verifyCode"
            @on-focus="handleFocus" 
             novalidate 
            :icon-type="verifyCode.iconType" 
             placeholder="发送验证码" v-model="verifyCode.val" :is-type="verifyCode.validPwd" required>
                <x-button :disabled="disabled" :text="text" @click.native="getVerifyCode" action-type="button" slot="right" type="primary" mini></x-button>
            </x-input>
        </group>

        <div style="margin-top: 1.5em;">
            <x-button action-type="button" type="primary" :show-loading="isLoading" @click.native="submitData">注册</x-button>
        </div>
    </form>
</template>

<script>
import { Group, XInput, XButton, Toast } from 'vux'
export default {
    name: 'ForgetPwd',
    components: {
        Group,
        XInput,
        XButton,
        Toast
    },
  data () {
    return {
      isLoading: false,
      disabled: false,
      text: '发送验证码',
      mobile: {
        val: '',
        iconType: ''
      },
      password: {
        val: '',
        validPwd: function (value) {
          return {
            valid: /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,16}$/.test(value),
            msg: '密码格式错误，必须为6-16个字符(包含字母+数字)!'
          }
        },
        iconType: ''
      },
      verifyCode: {
           val: '',
           validPwd: function (value) {
               return {
                    valid: /^[0-9]{6}$/.test(value),
                    msg: '验证码格式不正确'
                }
           },
           iconType:''
      }
    }
  },
  created() {
    //   this.type = this.$route.query.type
  },
  methods: {
      handleBlur: function(value, $event){
        const target = $event.target.name
        if (target === 'mobile') {
            const validResult = this.$refs.mobile.valid
            if (!validResult) {
            this.$vux.toast.text(this.$refs.mobile.errors.format || '手机号码不能为空')
            this.mobile.iconType = 'error'
            } else {
            this.mobile.iconType = 'success'
            }
        } else if (target === 'password') {
            const validResult = this.$refs.password.valid
            if (!validResult) {
            this.$vux.toast.text(this.$refs.password.errors.format || '请输入您的密码')
            this.password.iconType = 'error'
            } else {
            this.password.iconType = 'success'
            }
        } else if (target === 'verifyCode') {
            const validResult = this.$refs.verifyCode.valid
            if (!validResult) {
            this.$vux.toast.text(this.$refs.verifyCode.errors.format || '验证码不能为空')
            this.verifyCode.iconType = 'error'
            } else {
            this.verifyCode.iconType = 'success'
            }
        }
      },
      handleFocus: function(value, $event){
        const target = $event.target.name
        if (target === 'mobile') {
            this.mobile.iconType = ''
        } else if (target === 'password') {
            this.password.iconType = ''
        } else if (target === 'verifyCode' ) {
             this.verifyCode.iconType = ''
        }
      },
      submitData: function(){
          debugger
        if(!this.$refs.mobile.valid) {
            this.$vux.toast.text(this.$refs.mobile.errors.format || '手机号码不能为空')
            return false;
        } 
        if(!this.$refs.password.valid) {
            this.$vux.toast.text(this.$refs.newPwd1.errors.format || '请输入您的密码')
            return false;
        }
        if(!this.$refs.verifyCode.valid) {
            this.$vux.toast.text(this.$refs.verifyCode.errors.format || '请输入验证码')
            return false;
        }
        this.isLoading = true
        this.$store.dispatch('register', { mobile: this.mobile.val, password: this.password.val})
        .then((res) => {
            this.isLoading = false
            let _this = this
            this.$vux.toast.show({
                text: '注册成功',
                type: 'success',
                onHide () {
                     _this.$router.push({path: '/learnLogin'})
                }
            })
        }).catch(err => {
            this.isLoading = false
            console.log(err)
        })
      },
      getVerifyCode: function() {
          if(!this.$refs.mobile.valid) {
            this.$vux.toast.text(this.$refs.mobile.errors.format || '手机号码不能为空')
            return false;
          } 
          this.$store.dispatch('getRegisterCode', {mobile: this.mobile.val})
          .then((res) => {
              this.disabled = true
              this.text = '发送成功'
              this.countTime();
          }).catch(err => {
              console.log(err)
          })
          
      },
      //计时
      countTime: function(){
        let time = 60;
        let setVal = setInterval(() => {
            if (time > 1) {
                time--;
                this.text = `${time}S后可重获取`
            } else {
                this.text = '获取验证码'
                this.disabled = false
                clearInterval(setVal);
            }
        }, 1000);
      }
  }
}
</script>

<style scoped lang='less'>
.forgetPwd-form {
    width: 85%;
    margin: 0 auto;
    margin-top: 5em;

    /deep/ .weui-cells {
        border-radius: 10px;
        border: 1px solid #ccc;
        outline:none;
    }
}
</style>
